<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>首页</title>
 <meta name="renderer" content="webkit|ie-comp|ie-stand" />  
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
  <meta name="apple-mobile-web-app-capable" content="yes">  
  <meta name="format-detection" content="telephone=no"> 
	<link rel="stylesheet" type="text/css" href="layui/css/layui.css" media="all">
	<link rel="stylesheet" type="text/css" href="js/bootstrap/css/bootstrap.css" media="all">
	<link rel="stylesheet" type="text/css" href="css/global.css">
	<link rel="stylesheet" type="text/css" href="css/main.css" media="all">
	<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_ci1breot2kmlsor.css"/>
	<style>
		thead > tr{
			background:#fff;
		}
		.device{
			cursor:pointer; 
		}
		#showNoticeInfo > thead {
			display: none;
		}
		.sorting_1{
			width: 200px;
		}
	</style>
</head>
<body>
<section class="larry-wrapper">
    <!-- overview -->
	<div class="row state-overview">
		<div class="col-lg-3 col-sm-6">
			<section class="panel">
				<div class="symbol userblue"><i class="iconfont icon-jinggao"></i>
				</div>
				<div class="value">
					<sp class="device" name="lis">
						<h1 id="count1"></h1>
					</sp>
					<p>异常设备数量</p>
				</div>
			</section>
		</div>
		<div class="col-lg-3 col-sm-6">
			<section class="panel">
				<div class="symbol commred"><i class="iconfont icon-baojing"></i>
				</div>
				<div class="value">
					<sp class="device" name="lis">
						<h1 id="count2"></h1>
					</sp>
					<p>超限设备数量</p>
				</div>
			</section>
		</div>
		<div class="col-lg-3 col-sm-6">
			<section class="panel">
				<div class="symbol articlegreen">
					<i class="iconfont icon-chenggong"></i>
				</div>
				<div class="value">
					<sp class="device" name="lis">
						<h1 id="count3"></h1>
					</sp>
					<p>正常设备数量</p>
				</div>
			</section>
		</div>
		<div class="col-lg-3 col-sm-6">
			<section class="panel">
				<div class="symbol rsswet">
					<i class="iconfont icon-duankai1"></i>
				</div>
				<div class="value">
					<sp class="device" name="lis">
						<h1 id="count4"></h1>
					</sp>
					<p>失联设备数量</p>
				</div>
			</section>
		</div>
	</div>
	<!-- overview end -->
	<div class="row">
		<div class="col-lg-6">
			 <!-- 系统公告 -->
             <section class="panel">
                 <header class="panel-heading bm0">
                        <span class='span-title'>系统公告</span>
                        <span class="tools pull-right"><a href="javascript:;" class="iconpx-chevron-down"></a></span>
                  </header>
                  <div class="panel-body ">
                        <table class="table table-hover personal-task" id="showNoticeInfo">

                        </table>
                  </div>
             </section>

		</div>
		<div class="col-lg-6">
              <!-- 最新文章 -->
             <section class="panel">
                  <header class="panel-heading bm0">
                        <span class='span-title'>报警信息</span>
                        <span class="tools pull-right"><a href="javascript:;" class="iconpx-chevron-down"></a></span>
                  </header>
                  <div class="panel-body">
                       <table class="table table-hover personal-task" id="main_message">
                       </table>
                  </div>
             </section>
		</div>
	</div>

</section>

<script type="text/javascript" src="layui/layui-1.0.8.js"></script>
<script type="text/javascript" src="js/common.js" ></script>
<script src="js/main_message.js"></script>
<script src="js/showNoticeInfo.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="//cdn.bootcss.com/jquery/2.2.3/jquery.js"></script>
<script src="http://cdn.bootcss.com/sockjs-client/1.1.1/sockjs.min.js"></script>
<script src="http://cdn.bootcss.com/stomp.js/2.3.3/stomp.js"></script>
<script type="text/javascript">
	layui.use(['jquery','layer','element'],function(){
		$ = layui.jquery;
		window.layer = layui.layer;
        window.element = layui.element();

       $('.panel .tools .iconpx-chevron-down').click(function(){
       	   var el = $(this).parents(".panel").children(".panel-body");
       	   if($(this).hasClass("iconpx-chevron-down")){
       	   	   $(this).removeClass("iconpx-chevron-down").addClass("iconpx-chevron-up");
       	   	   el.slideUp(200);
       	   }else{
       	   	   $(this).removeClass("iconpx-chevron-up").addClass("iconpx-chevron-down");
       	   	   el.slideDown(200);
       	   }
       });
       
       var lis = document.getElementsByTagName("sp");
		for (var i = 0; i < lis.length; i++){(
			function(arg){
				
		       lis[arg].onclick = function(){
		           	parent.document.getElementById("item").click();
		           	
					parent.document.getElementById("monitoring").setAttribute("data-url",'monitorings.html?deviceState='+arg);
					
					parent.document.getElementById("monitoring").setAttribute("data-type",2);
					parent.document.getElementById("monitoring").click();
					parent.document.getElementById("monitoring").setAttribute("data-url",'monitorings.html');
		         
		       };
		   })(i)  
		}
		
		$.ajax({
			url :url+ '/ic-iot/users/'+adminId+'/devices/state/count',//117
			type : 'get',
			dataType : 'json',
			beforeSend: function(request) {
	            request.setRequestHeader("accessToken", accessToken);
	        },
			success : function(data) {
				if(data['code'] == 1){
					$("#count1").text(data.result.exception);
					$("#count2").text(data.result.overrun);
					$("#count3").text(data.result.online);
					$("#count4").text(data.result.offline);
				}else{
					ifajax(data);
				}

			}
		});

	/*	$.ajax({
            url :url + '/ic-iot/notice/list',
            type : 'get',
            dataType : 'json',
            data:{
                "pageNo":1,
                "pageSize":8
            },
            beforeSend: function(request) {
                request.setRequestHeader("accessToken", accessToken);
            },
            success : function(data) {
                var str = '';
                if(data['code'] == 1){
                    str += '<tr><td>';
                    for(var i=0; i< data.result.length; i++){
                        var info = data.result[i];
                        str += '<p>'+info.msg+'</p>';
					}
					str += '</td></tr>';
                }else{
                    ifajax(data);
                }
                $("#showNoticeInfo").html(str);
            }
		});*/
	});

   $.ajax({
       url :url+ '/ic-iot/users/'+adminId+'/devices/state/count',//117
       type : 'get',
       dataType : 'json',
       beforeSend: function(request) {
           request.setRequestHeader("accessToken", accessToken);
       },
       success : function(data) {
           if(data['code'] == 1){
               $("#count1").text(data.result.exception);
               $("#count2").text(data.result.overrun);
               $("#count3").text(data.result.online);
               $("#count4").text(data.result.offline);
           }else{
               ifajax(data);
           }

       }
   });

	var stompClient = null;
    function connect() {
        var socket = new SockJS(url+"/ic-iot/hello");
        stompClient = Stomp.over(socket);
        stompClient.connect({}, function (frame) {
            stompClient.subscribe('/user/'+adminId+'/state/count', function (response) {
				var data = JSON.parse(response.body);
				if(data['code'] == 1){
					$("#count1").text(data.result.exception);
					$("#count2").text(data.result.overrun);
					$("#count3").text(data.result.online);
					$("#count4").text(data.result.offline);
				}else{
					ifajax(data);
				}

				//5分钟查询一次
				setTimeout(query, 5*60*1000);
			});
			query();
		});
	}
	function query() {
		var param = {
			userId: adminId
		};
		var src = "/app/state/count";
		stompClient.send(src, param);
	}
    connect();
</script>
</body>
</html>